<style lang="stylus" scoped>
  .unpaid
    padding: 0 1.25rem;
    overflow: auto;
    position absolute
    top 7.2rem
    bottom 5.5rem
    box-sizing border-box
    width 100%
    .data-swiper
      width 100%;
      height 100%
      .openPrizeitem
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 1rem;
        border: 1px solid #dcb87f;
        background-color: rgba(0,0,0,.7);
        border-radius: 15px;
        align-items: center;
        margin-top: .5rem;
        .openPrizeBall
          display: flex;
          align-items: center;
          span 
            width: 2.75rem;
            height: 2.75rem;
            margin-left: .125rem;
            line-height: 2.75rem;
            background: url(../assets/redBallLight.png) no-repeat center center;
            background-size: 100% 100%;
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
            &:last-of-type
              background: url(../assets/blueBallLight.png) no-repeat center center;
              background-size: 100% 100%;
        .lock
          width: 23%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          span 
            color: #fff;
            padding: .5rem 1.5rem;
            font-size: 12px;
            border-radius: 1rem;
            background: linear-gradient(to bottom,#eecf7a,#9c7614 100%);
      .btnClickMore
        width: 40%;
        height: 3rem;
        line-height: 3rem;
        color: #fff;
        border: 2px solid #fff;
        margin-left: 30%;
        text-align: center;
        font-size: 1.25rem;
    .noData
      display: block;
      width: 100%;
      text-align: center;
      img 
        width: 35%;
        margin-top: 3rem;
</style>

<template>
  <div class="unpaid">
    <swiper class="data-swiper" :options="swiperOption" v-if="lists > 0">
      <swiper-slide class="slide" :key="index" v-for="(item,index) in lists">
        <div class="openPrizeitem">
          <div class="openPrizeBall">
            <span>7</span>
            <span>11</span>
            <span>15</span>
            <span>18</span>
            <span>27</span>
            <span>0</span>
          </div> 
          <a class="lock"><span>付款</span></a>
        </div>
      </swiper-slide>
      <swiper-slide class="slide">
        <div class="btnClickMore">点击加载更多</div>
      </swiper-slide>
    </swiper>
    <span class="noData"><img src="../assets/noData.png"></span>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data(){
    return {
      lists:5,
      swiperOption:{
        direction: 'vertical',
        freeMode: true,
        autoHeight:true,
        slidesPerView :'auto',
        spaceBetween:8
      }
    }
  },
  components:{
    swiper,
    "swiper-slide":swiperSlide,
  },
}
</script>
